InputText

InputText 為基本的輸入框元件，寫法如下：

<InputText type="text" v-model="value" />

若需要 Float Label 則可外包一層 元件：

<FloatLabel>
  <InputText id="username" v-model="value" />
  <label for="username">Username</label>
</FloatLabel>

若要加上 icon 再外層包 元件，icon 使用 設定：

<IconField>
    <InputIcon class="pi pi-search" />
    <InputText v-model="value1" placeholder="Search" />
</IconField>

通常這時候就會想那這樣 FloatLabel 跟 IconField 可以合併使用嗎？嘗試了一下寫法會如下：
但 label 可能須向左推一些空間給搜尋圖示顯示，不然會疊在一起。

<FloatLabel>
    <IconField>
      <InputIcon class="pi pi-search" />
      <InputText id="username" v-model="value" />
    </IconField>
    <label for="username" class="ms-6">Username</label>
</FloatLabel>

輸入時：

外觀樣式

1. size：加上 size 屬性，預設為 normal，另可填入 small 或 large。

   以下填入 fluid 屬性將 InputText 寬度設置 100%。

   <InputText v-model="value1" type="text" size="small" placeholder="Small" fluid class="mb-6" />
   <InputText v-model="value2" type="text" placeholder="Normal" fluid class="mb-6" />
   <InputText v-model="value3" type="text" size="large" placeholder="Large" fluid />
   

   

2. Filled：之前在 Options 提過加上 variant="filled” 屬性可為輸入框添上背景色彩。

3. Invalid：加上 invalid 屬性添加上 .p-inputtext.p-invalid 的樣式設定。
   

4. Disabled：加上 disabled 屬性添加上 .p-inputtext:disabled 的樣式設定，並為 input 加上 disabled 屬性。
   

   

Input 各式元件

以下介紹 PrimeVue 提供其他 InputText 的變體元件。

InputNumber

提供可輸入數字的 input 元件，並提供方便的屬性設定規則：

1. 只能輸入整數：預設 InputNumber，包含三位數分隔號。

2. useGrouping：設為 false 時移除三位數的分隔符號。

3. 小數點位數：minFractionDigits 及 maxFractionDigits 設定可輸入的小數點位數長度。

4. 加上 min 及 max 設定可輸入的整數間距。
   

5. 另外想保留原生 input type=”number” 的上下調整按鈕鍵，可再加上 showButtons；搭配 buttonLayout 設定上下按鈕在水平或垂直位置。

<div class="card flex flex-wrap gap-4 mb-6">
  <div class="flex-auto">
    <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
    <InputNumber
      v-model="value1"
      inputId="integeronly"
      fluid
      showButtons // 顯示上下按鈕，預設為上下
      buttonLayout="horizontal" // 調整為水平按鈕
    />
  </div>
  <div class="flex-auto">
    <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
    <InputNumber
      v-model="value2"
      inputId="withoutgrouping"
      showButtons  // 顯示上下按鈕，預設為上下
      :useGrouping="false"
      fluid
    />
  </div>
</div>

其餘還可加上貨幣符號或其他前綴後綴等符號。

InputMask

InputMask 提供固定的輸入格式，以提升使用者操作體驗。
加上 mask 屬性即可設定格式：

<!-- 室話 -->
<InputMask id="basic" v-model="value" mask="04-99999999" placeholder="04-99999999" />

輸入時：

mask 可輸入的提示符號：

1. a 表示輸入英文字母
2. 9 表示輸入數字
3. '*' 米字號 表示可輸入英文字母或數字
4. 可接受 (、) 、- 等符號

另外也提供 slotChar 在輸入時給予額外提示，如 mm/dd/yyyy。

<InputMask
  id="basic"
  v-model="value"
  placeholder="99/99/9999"
  mask="99/99/9999"
  slotChar="mm/dd/yyyy"
  fluid
/>

輸入時提示

InputOtp

提供輸入 OTP 的輸入框元件。

<InputOtp v-model="value" />

提供屬性：

1. mask：隱藏輸入的值。
2. integerOnly：僅可輸入整數。
   也提供 template 客製外觀樣式。

<InputOtp v-model="value" mask />

參考連結

1. https://primevue.org/inputtext/
2. https://primevue.org/floatlabel/
3. https://primevue.org/iconfield/
4. https://primevue.org/inputmask/
5. https://primevue.org/inputotp/
6. https://primevue.org/inputnumber/